<!--
 * @Author: 小花
 * @Date: 2022-05-12 15:23:59
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-13 17:06:34
 * @FilePath: /vue3-teap/src/components/RoleManage.vue
 * @Description:
-->
<template>
  <el-table :data="roleList" style="width: 100%">
    <el-table-column label="角色ID" prop="roleId" />
    <el-table-column label="角色名" prop="roleName" />
    <el-table-column align="right">
      <template #header>
        <button class="addRoleButton" @click="addRoleFn">
          <div class="icon">
            <i class="fa fa-plus" aria-hidden="true"></i>
          </div>
          <span>添加角色</span>
        </button>
      </template>
      <template #default="scope">
        <el-button type="danger" plain round @click="delRoleFn(scope.row)">删除 {{scope.row.roleName}}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRaw, toRefs } from 'vue'
import { pullRole, addRole, delRole } from '@/plugins/request/http'
import RoleManageData, { IRole } from '@/model/main/layout/dynamicNav/PermissionPage/RoleManage'
import { responseUtil } from '@/plugins/request/responseUtil'
import { useStore } from '@/plugins/store/store'
import nProgress from 'nprogress'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'RoleManage',
  setup () {
    const store = useStore()
    const coreData = reactive(new RoleManageData())

    /**
     * @description: 后端拉取角色信息
     * @param {*}
     * @return {*}
     */
    const execPullRole = async () => {
      nProgress.start()
      const result = await (await pullRole()).data as responseUtil<IRole[]>
      coreData.roleList = result.data
      store.role = result.data
      nProgress.done()
    }
    execPullRole()

    /**
     * @description: 添加角色
     * @param {*}
     * @return {*}
     */
    const addRoleFn = async () => {
      nProgress.start()
      const inputRole = prompt('请输入角色名称')
      if (inputRole === null || inputRole === '') {
        nProgress.done()
        return
      }
      const result = await (await addRole(inputRole)).data as responseUtil
      coreData.roleList.push({
        roleId: result.data,
        roleName: inputRole
      })
      store.role = toRaw(coreData.roleList)
      ElMessage.success('角色添加成功')
      nProgress.done()
    }

    /**
     * @description: 删除角色
     * @param {*} row 角色对象
     * @return {*}
     */
    const delRoleFn = async (row: IRole) => {
      const isDel = confirm(`确定要删除 ${row.roleName}?`)
      if (isDel) {
        nProgress.start()
        await delRole(row.roleId)
        coreData.roleList.splice(
          coreData.roleList.findIndex(item => item.roleId === row.roleId), 1
        )
        store.role = toRaw(coreData.roleList)
        ElMessage.success(`${row.roleName} 删除成功`)
        nProgress.done()
      }
    }

    return {
      ...toRefs(coreData),
      addRoleFn,
      delRoleFn
    }
  }
})
</script>

<style lang='scss' scoped>
@import '@/assets/scss/addRoleButton.scss';
</style>
